<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <script src="../lib/jquery-1.10.2.min.js"></script>
    <script src="../dist/tinyselect.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/tinyselect.min.css"/>
    <link rel="stylesheet" type="text/css" href="misc/css/example.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/codemirror.css"/>
    <script src="../lib/codemirror/codemirror.js"></script>
    <script src="../lib/codemirror/mode/javascript/javascript.js"></script>
    <script src="../lib/codemirror/mode/xml/xml.js"></script>
    <script src="../lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="../lib/codemirror/mode/css/css.js"></script>
    <link rel="stylesheet" type="text/css" href="misc/css/gridbox.css"/>
</head>

<body>
<var type="less" src="misc/less/gridbox.less"></var>
<div class="tinyselectcontext-container">
    <div id="tinyselectcontext" class="multiple"></div>
</div>
<div class="tips">
    通过附加样式类<b>grid-box</b>：给每一项设置固定的宽度，以使选中效果正常。需要注意的是，下拉框的宽度和每一项的宽度需要自己去计算才能更好的满足需要。
</div>
<script src="misc/js/source.js"></script>
<script>
    $.getJSON('misc/data/data.json').then(function (data) {
        tinyselect('#tinyselectcontext', {
            box: {
                layout: 'grid',
                css: 'grid-box'
            },
            item: {
                data: data,
                // 设置所有项可见，这个属性可以阻止组件计算高度
                visible: 0
            },
            style: {
                width: 260
            },
            result: {
                multi: true
            }
        });
    });
</script>
</body>

</html>